<template>
  <div class="div">
    <PageTitle title="玩具订单列表"></PageTitle>
    <el-row :gutter="10">
      <el-col :span="12">
        <!-- <dl class="select-bar">
          <dt>筛选:</dt>
          <dd :class="{ current: status == '' }" @click="handleClick('')">全部</dd>
          <dd :class="{ current: status == '1' }" @click="handleClick('1')">待付款</dd>
          <dd :class="{ current: status == '2' }" @click="handleClick('2')">待发货</dd>
          <dd :class="{ current: status == '6' }" @click="handleClick('6')">待收货</dd>
          <dd :class="{ current: status == '4' }" @click="handleClick('4')">已完成</dd>
          <dd :class="{ current: status == '5' }" @click="handleClick('5')">退货申请中</dd>
        </dl> -->
      </el-col>
      <el-col :span="6">
        <el-input :placeholder="'输入订单号搜索'" v-model="search" @keypress.enter.native="handleSearch">
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input>
      </el-col>
      <el-col :span="6">
        <DatePicker @dateChange="dateChange" />
      </el-col>
    </el-row>
    <el-table
      stripe
      :data="tableData"
    >
      <el-table-column
        prop="order_code"
        label="订单号">
      </el-table-column>
      <el-table-column
        label="商品图片(视频)"
      >
        <template slot-scope="scope">
          <img v-if="!scope.row.url.endsWith('mp4')" :src="scope.row.url" @click="handlePictureCardPreview(scope.row.url)" class="list-img">
          <a v-else :href="scope.row.url" target="_blank">
            <video :src="scope.row.url"></video>
          </a>
        </template>
      </el-table-column>
      <el-table-column
        label="品牌名称"
        prop="fication_name"
      >
      </el-table-column>
      <el-table-column
        label="总价格"
      >
        <template slot-scope="scope">
          ￥{{ scope.row.subtotal }}
        </template>
      </el-table-column>
      <el-table-column
        label="用户"
        prop="nikname"
      >
      </el-table-column>
      <el-table-column label="是否发货" prop="">
        <template slot-scope="scope">
          {{scope.row.shop_state==1?'已发货':'未发货'}}
        </template>
      </el-table-column>
      <el-table-column label="支付方式" prop="">
        <template slot-scope="scope">
          {{scope.row.pay_status==1?'微信支付':scope.row.pay_status==4?'活动领取':'余额支付'}}
        </template>
      </el-table-column>
      <el-table-column label="支付时间" prop="pay_at">

      </el-table-column>
      <!-- <el-table-column
        label="操作">
      <template slot-scope="scope">
        <router-link :to="'/orderList/orderDetail/' + scope.row.oid" class="el-button el-button--text">查看</router-link>
      </template>
      </el-table-column> -->
    </el-table>
    <div class='pagination-wrapper'>
      <el-pagination
        layout="prev, pager, next"
        @current-change="pageChange"
        :page-size="pageSize"
        :total="totalCount"
        :current-page="pageNum"
      >
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl">
    </el-dialog>
  </div>
</template>

<script>
  import PageTitle from '@/components/pageTitle/PageTitle.vue'
  import DatePicker from '@/components/datePicker/DatePicker.vue'
  export default {
    name: 'OrderList',
    components: {
      PageTitle,
      DatePicker
    },
    activated() {
      this._getList()
    },
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        tableData: [],
        status: '',
        pageNum: 1,
        pageSize: 10,
        totalCount: 0,
        date: [],
        search: '',
      }
    },
    computed: {
      statusParams() {
        let obj = {}
        switch (this.status){
          case '':
          break
          case '1':
            obj.payment_status = 1
            break
          case '2':
            obj.payment_status = 2
            obj.shipping_status = 2
            break
          case '4':
            obj.shipping_status = 4
            break
          case '5':
            obj.shipping_status = 5
            break
          case '6':
            obj.shipping_status = 6
            break
        }
        return obj
      }
    },
    methods: {
      async _getList() {
        let { data: { code, data } } = await this.$axios({
          url: this.$api + '/v1/order/show',
          method: 'GET',
          params: {
            size: this.pageSize,
            page: this.pageNum,
            ...this.statusParams,
            start_time: this.date[0],
            end_time: this.date[1],
            order: this.search
          }
        })
        if(code === 0) {
          if(data.item.length) {
            console.log(data.pages.totalCount)

            this.tableData = data.item.map((item,index)=>{
              item.nikname = data.namae[index]
              return item
            })
            this.totalCount = parseInt(data.pages.totalCount)
          } else {
            this.tableData = []
          }
        }
      },
      handleClick(s) {
        this.status = s
        this.pageNum = 1
        this.$nextTick(() => {
          this._getList()
        })
      },
      handleSearch() {
        this.pageNum = 1
        this._getList()
      },
      pageChange(pageNum) {
        this.pageNum = pageNum,
        this._getList()
      },
      dateChange(date) {
        this.date = date
        this.pageNum = 1
        this._getList()
      },
      handlePictureCardPreview(src) {
        this.dialogImageUrl = src;
        this.dialogVisible = true;
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/select-bar.scss';
  .list-img, video {
     width:80%;
     height:60px;
     cursor: pointer;
  }
  .el-button--text {
    text-decoration: none;
  }
</style>
